<template>
  <view class="ques-from">
    <view v-if="isWrite">
      <view class="ques-from-header">
        <view class="header-text">{{ qHeader }}</view>
      </view>
      <form @submit="formSubmit" @reset="formReset">
        <view
          class="ques-from-item"
          v-for="(item, index) in questionFrom"
          :key="index"
        >
          <view class="item-title"> {{ index + 1 }}.{{ item.title }} </view>
          <view v-if="item.sort === '单'">
            <radio-group :name="'单,' + item.option_id" class="radio-group">
              <label
                class="uni-list-cell uni-list-cell-pd"
                v-for="(select, index) in item.optionOne"
                :key="index"
              >
                <view>
                  <radio
                    :value="select.pick"
                    style="transform: scale(0.7)"
                    color="#20b1ff"
                  />
                  <text class="text">{{ select.pickText }}</text>
                </view>
              </label>
            </radio-group>
          </view>
          <view v-else-if="item.sort === '多'">
            <checkbox-group :name="'多,' + item.option_id" class="radio-group">
              <label v-for="(select, index) in item.optionOne" :key="index">
                <view>
                  <checkbox
                    :value="select.pick"
                    color="#20b1ff"
                    style="transform: scale(0.7)"
                  />{{ select.pickText }}
                </view>
              </label>
            </checkbox-group>
          </view>
          <view v-else>
            <view class="uni-textarea1">
              <textarea
                class="uni-width"
                placeholder-style="color:#666"
                placeholder="在此输入"
                :name="'填,' + item.option_id"
              />
            </view>
          </view>
        </view>
        <view class="uni-btn-v">
          <button plain="true" form-type="submit">提交</button>
        </view>
      </form>
    </view>
    <view class="ques-success" v-else>
      <div class="icon">
        <icon type="success" size="35" />
      </div>
      <div class="text">您已经填过该问卷</div>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      name: Number,
      openid: "",
      qID: "",
      qHeader: "",
      isWrite: true,
      questionFrom: [  
      ],
    };
  },
  onLoad(option) {
    this.qID = decodeURIComponent(option.q_id);
    this.qHeader = decodeURIComponent(option.q_header);
  },
  onShow() {
    this.writeTest();
    this.requestData();
  },
  methods: {
    //是否已经填写过验证
    writeTest() {
      let that = this;
      uni.getStorage({
        key: "openid",
        success: function (res) {
          console.log(res);
          that.openid = res.data;
          that
            .$MyRequest({
              url: "/test_ques_people_req",
              method: "POST",
              data: {
                qId: that.qID,
                openid: that.openid,
              },
            })
            .then((res) => {
              console.log(res.data);
              if (res.data.IsWrite == "已填过") {
                that.isWrite = false;
              } else {
                that.isWrite = true;
              }
            });
        },
        fail: (err) => {},
      });
    },
    requestData() {
      this.$MyRequest({
        url: "/get_ques_con_list",
        method: "POST",
        data: {
          qId: this.qID,
        },
      }).then((res) => {
        let optionData = res.data.data[0].options;
        // console.log(optionData);
        this.questionFrom = JSON.parse(optionData);
        // console.log(optionData);
      });
    },
    formSubmit(e) {
      console.log(
        "form发生了submit事件，携带数据为：" + JSON.stringify(e.detail.value)
      );
      let formdata = e.detail.value;
      let sendData = JSON.stringify(formdata);
      // Object.keys(formdata).forEach((key) => {
      //   console.log(formdata[key]); // foo
      // });
      // let that=this;
      this.$MyRequest({
        url: "/set_ques_people_req",
        method: "POST",
        data: {
          openid: "oidHH5OcwQOyVqI8fCb6E3kYjrpA",
          qId: this.qID,
          peopleSelect: sendData,
        },
      }).then((res) => {
        // let optionData = res.data.data[0].options;
        // this.questionFrom = JSON.parse(optionData);
        uni.showLoading({
          title: "正在提交",
        });
        setTimeout(() => {
          uni.hideLoading();
          this.writeTest();
        }, 500);
        // uni.showModal({
        //     title: "提示",
        //     content: "今日已上报",
        //     success: function (res) {
        //       if (res.confirm) {
        //         console.log("用户点击确定");
        //         // that.temList();
        //       } else if (res.cancel) {
        //         console.log("用户点击取消");
        //       }
        //     },
        //   });
        // this.writeTest();
        // console.log(optionData);
      });

      // for (const key in formdata) {
      //   console.log(key);
      //   console.log(formdata[key]);
      // }
      // console.log(formdata);
    },
    radioChange: function (evt) {
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].value === evt.target.value) {
          this.current = i;
          break;
        }
      }
    },
  },
};
</script>

<style lang="scss">
@import "@/static/styles/mixin.scss";
.ques-from {
  width: 100%;
  height: 100vh;
  background: #fff;
  box-sizing: border-box;
  padding: 0 17px;
  .ques-from-header {
    height: 200rpx;
    border-bottom: 1px dashed #999;
    margin-bottom: 13px;
    .header-text {
      height: 100%;
      font-size: 20px;
      // line-height: 32px;
      font-weight: bold;
      color: #1ea0fa;
      @include center;
    }
  }
  .ques-from-item {
    padding-bottom: 20px;
    .radio-group {
      padding-left: 9px;
    }
    .item-title {
      font-size: 16px;
      font-weight: bold;
      line-height: 26px;
      margin-bottom: 10px;
    }
    .text {
      font-size: 16px;
    }
  }
  .uni-btn-v {
    padding: 50rpx 0 20rpx 0;
    // border-top: 0 20rpx solid;
    button {
      width: 85%;
      border-radius: 2%;
      font-size: 40rpx;
      color: #fff;
      // size: 10;
      height: 40px;
      @include center;
      background-color: $uni-color-primary;
      border: none;
    }
  }
  .uni-textarea1 {
    margin: 0 auto;
    // box-sizing: border-box;
    border-radius: 2%;
    background-color: $uni-bg-color-hover;
    padding: 10rpx 15rpx;
    font-size: 30rpx;
    height: 120px;
  }
}
.ques-success {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding-top: 40%;
  .icon {
    @include center;
  }
  .text {
    @include center;
    padding-top: 10rpx;
  }
}
</style>
